<template>
<div class="layerRtb layerRtb-threecolumn layerRtb-right">
    <three-title :title="{name:'现场交底'}" :close="false">
        <span tag="i" class="rig_close fr" @click="$parent.$parent.clickFiveShow()"></span>
    </three-title>
    <div class="layerRtb-scroll thinScroll" v-scrollHeight = "18" >
       <div class="analyItem" v-for="(item, index) in discloseData" :key="index">
            <p class="analyItemTit tx-center">{{item.participantsRole}}</p>
            <div class="analyItemCon">
                <div class="flex">
                    <div class="col-md-11">
                         <div class="clearfix">
                            <label for="discloseDec" class="fl mr10">描述:</label>
                            <span v-if="discloseDataClone[index].photoList.length > 0">{{item.description}}</span>
                            <textarea id="discloseDec" class="col-md-10" v-model="item.description" v-else></textarea>
                        </div>
                        <div class="clearfix mt10">
                            <rx-viewer :images="item.photoList" class="fl">
                                <div class="clearfix">
                                    <div class="fl mr10" :option={}  v-for="(imgitem, imgindex) of item.photoList" :key="imgindex">
                                        <img :src="imgitem | smallImg(80, 80)" >
                                    </div>
                                </div>
                            </rx-viewer>
                            <rx-upload
                                v-if="buttonIsShow && discloseDataClone[index].photoList.length === 0"
                                :data="{id: item.id}"
                                :init="{class: 2, mime: 1}"
                                :elStyle="{width:'80px', height: '80px'}"
                                @success="successUpload" class="fl">
                                <div class="fl uiImgUpload uiImgUpload-gblock">
                                    <a href="javascript:">
                                        <span type="file" value="" class="file"></span>
                                        <em class="bgIcon file-ico"></em>
                                    </a>
                                </div>
                            </rx-upload>
                        </div>
                    </div>
                    <input type="button" class="uiBtn-small uiBtn-blue" value="确定" @click="submitButton(item.id)" v-if="buttonIsShow && discloseDataClone[index].photoList.length === 0" >
                </div>
            </div>
        </div>
    </div>
    <!-- <div class="layerRtb-footer">
        <div class="analyItem">
            <p class="analyItemTit tx-center">综合</p>
            <div class="analyItemCon">
                <div class="tx-center">

                </div>
            </div>
        </div>
    </div> -->
</div>
</template>
<script>
import { mapGetters, mapMutations } from 'vuex'
import { getLiveonsiteOrderDetails, discloseuploadPhoto } from '../../../../Resources/Api/index'
export default {
    props: ['type', 'role'],
    data () {
        return {
            discloseData: null, // 交底数据
            buttonIsShow: false, // 按钮是否显示
            discloseDataClone: null, // 交底数据
            submitLength: 0 // 提交次数
        }
    },
    created () {
        this.getLiveonsiteOrderDetails()
        this.buttonType()
    },
    computed: {
        ...mapGetters(['leftInfo', 'twoToThreeInfo', 'updatePlate', 'userInfo'])
    },
    methods: {
        // 按钮显示与隐藏
        buttonType () {
            if (this.userInfo.as_diquId === 39) {
                if (this.twoToThreeInfo.status === this.type) {
                    this.buttonIsShow = true
                } else {
                    this.buttonIsShow = false
                }
            } else {
                this.buttonIsShow = false
            }
        },
        ...mapMutations({
            setUpDatePlate: `SET_UPDATE_PLATE`
        }),
        // 上传图片
        successUpload (value) {
            const currentData = this.discloseData.filter((item) => { return item.id === Number(value.data.id) })
            if (currentData.length > 0) {
                const photoList = currentData[0].photoList
                this.$set(currentData[0], 'photoList', [...photoList, value.src])
            }
        },
        // 获取数据
        getLiveonsiteOrderDetails () {
            let parm = {
                orderNo: this.leftInfo.orderno
            }
            // 根据条件阶段查询订单
            getLiveonsiteOrderDetails(parm).then((result) => {
                if (result.data.StatusCode === 1) {
                    this.discloseData = result.data.Body.LiveonsiteEntity
                    this.discloseDataClone = this.$utils.cloneDeep(result.data.Body.LiveonsiteEntity)
                }
            }).catch((error) => {
                console.log(error)
            })
        },
        // 获取cookie
        getCookie (name) {
            let arr = new RegExp('(^| )' + name + '=([^;]*)(;|$)')
            let reg = new RegExp('(^| )' + name + '=([^;]*)(;|$)')
            if ((arr = document.cookie.match(reg))) { return unescape(arr[2]) } else { return null }
        },
        // 提交订单
        submitButton (currentId) {
            let submitPhotoList = []
            this.discloseData.forEach(item => {
                let submitPhoto = {}
                if (item.id === Number(currentId)) {
                    if (item.photoList.length === 0) {
                        this.$message('至少上传一张图片')
                        return false
                    }
                    if (item.description === null) {
                        this.$message('请输入描述内容')
                        return false
                    }
                    submitPhoto.id = currentId
                    submitPhoto.description = item.description
                    submitPhoto.url = item.photoList.join(',')
                    submitPhotoList.push(submitPhoto)
                }
            })
            let parm = {
                photos: submitPhotoList,
                projectOrderCode: this.$route.query.code,
                createUserNo: this.userInfo.as_cardNo,
                createUserName: this.userInfo.as_fullName
            }
            // 提交图片
            discloseuploadPhoto(parm).then(results => {
                if (results.data.StatusCode === 1) {
                    this.getLiveonsiteOrderDetails()
                    this.submitLength += 1
                    if (this.submitLength === this.discloseData.length) {
                        this.setUpDatePlate()
                        this.$parent.$parent.clickFiveShow()
                    }
                }
            }).catch(error => {
                console.log(error)
            })
        }
    },
    watch: {
        leftInfo () {
            this.getLiveonsiteOrderDetails()
        },
        $route () {
            this.getLiveonsiteOrderDetails()
        }
    }
}
</script>
